import React, { Fragment } from 'react';
import _ from 'lodash';
import { Card } from 'antd';
import TagItem from './TagItem';

import '../ui.less';



const DragTag = ({
  tags,
  onChangeTags,
}) => {

  const moveTag = (dragIndex, hoverIndex) => {
      const dragTag = tags[dragIndex];
      const cloneTags = _.cloneDeep(tags);
      cloneTags.splice(dragIndex, 1);
      cloneTags.splice(hoverIndex, 0, dragTag);
      onChangeTags(cloneTags);
  };

  const renderTags = (tag, index) => {
    return (
      <TagItem
        key={tag.id}
        id={tag.id}
        index={index}
        text={tag.name}
        moveTag={moveTag}
      />
    );
  }

  return (
    <Fragment>
      <Card title={'拖拽组件'} className={'card-wrap'}>
        {
          _.map(tags, (tag, index) => {
            return renderTags(tag, index);
          })
        }
      </Card>
    </Fragment>
  );
}


export default DragTag;